/* 05. other css here */
.hero_banner_section{
    background: #e7ecef;
    position: relative;
    height: 1000px;
    @media #{$desktop-device}{
        height: 780px;
    }
    @media #{$tablet-device}{
        height: auto;
        flex-direction: column;
        padding: 74px 0 79px;
    }
    @media #{$large-mobile}{
        height: auto;
        flex-direction: column;
        padding: 55px 0 60px;
    }
}


.hero_position_img{
    position: absolute;
    right: 11%;
    top: 54%;
    transform: translatey(-50%);
    @media #{$laptop-device}{
        right: 5%;
    }
    @media #{$desktop-device}{
        right: 2%;
        top: 56%;
    }
    @media #{$tablet-device}{
        left: 0;
        text-align: center;
        right: 0;
        top: auto;
        transform: inherit;
        position: inherit;
    }
    @media #{$large-mobile}{
        left: 0;
        text-align: center;
        right: 0;
        top: auto;
        transform: inherit;
        position: inherit;
        padding: 0 30px;
    }
    @media #{$small-mobile2}{
        padding: 0 20px;
    }
    & img{
        @media #{$laptop-device}{
            max-width: 580px;
        }
        @media #{$desktop-device}{
            max-width: 495px;
        }
        @media #{$tablet-device}{
            max-width: 580px;
        }
    }

}
.animation_thumb{
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 1.80);
    animation-name: animateUpDown;
    animation-iteration-count: infinite;
    transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes animateUpDown {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(0px);
    }
  }

.hero_content{
    margin-top: 85px;
    @media #{$tablet-device}{
        margin-top: 0;
        margin-bottom: 75px;
        text-align: center;
    }
    @media #{$large-mobile}{
        margin-top: 0;
        margin-bottom: 60px;
        text-align: center;
    }
    & .section_title{
        & > span{
            font-size: 20px;
            margin-bottom: 46px;
            color: #000000;
            font-weight: 400;
            @media #{$laptop-device}{
                margin-bottom: 25px;
            }
            @media #{$desktop-device}{
                font-size: 18px;
                margin-bottom: 20px;
            }
            @media #{$tablet-device}{
                font-size: 18px;
                margin-bottom: 20px;
            }
            @media #{$large-mobile}{
                font-size: 16px;
                margin-bottom: 18px;
            }
        }
        &.mb-55{
            @media #{$laptop-device}{
                margin-bottom: 40px;
            }
            @media #{$desktop-device}{
                margin-bottom: 25px;
            
            }
            @media #{$tablet-device}{
                margin-bottom: 25px;
            }
            @media #{$large-mobile}{
                margin-bottom: 22px;
            }
        }
    }
    & p{
        font-size: 18px;
        line-height: 30px;
        color: #666666;
        margin-bottom: 0;
        @media #{$desktop-device}{
            font-size: 16px;
            line-height: 27px;
            padding-right: 26px;
        
        }
        @media #{$tablet-device}{
            font-size: 16px;
            line-height: 30px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 25px;
        }
        
    }
}

.hero_play_store {
    margin-top: 90px;
    @media #{$laptop-device}{
        margin-top: 60px;
    }
    @media #{$desktop-device}{
        margin-top: 41px;
    }
    @media #{$tablet-device}{
        margin-top: 33px;
        justify-content: center;
    }
    @media #{$large-mobile}{
        margin-top: 25px;
        justify-content: center;
    }
    & img{
        margin-right: 15px;
    }
    & span{
        font-size: 16px;
        line-height: 24px;
        color: #304650;
        text-transform: uppercase;
        font-weight: 700;
        display: inline-block;
        @media #{$tablet-device}{
            font-size: 14px;
            line-height: 23px;
        }
        @media #{$large-mobile}{
            font-size: 14px;
            line-height: 21px;
        }
       
    }
}

.counterup_inner {
    padding: 50px 0;
    @media #{$tablet-device}{
        flex-direction: column;
        align-items: center;
    }
    @media #{$large-mobile}{
        flex-direction: column;
        align-items: center;
        padding: 60px 0 55px;
    }
    @media #{$small-mobile2}{
        padding: 60px 0 35px;
    }
}

.home_call_icon {
    & i{
        font-size: 18px;
        width: 45px;
        height: 45px;
        line-height: 45px;
        border-radius: 50%;
        text-align: center;
        color: $secondary_color2;
        background: $secondary_color;
        @media #{$large-mobile}{
            font-size: 16px;
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
    }
    & span{
        font-size: 14px;
        line-height: 18px;
        font-weight: 700;
        color: #0f2f65;
        display: inline-block;
        font-family: $montserrat;
        text-transform: uppercase;
        margin-left: 20px;
        @media #{$large-mobile}{
            font-size: 13px;
            line-height: 18px;
            margin-left: 15px;
        }
    }
}
.home_call_us {
    @media #{$tablet-device}{
       margin-bottom: 30px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
}
.call_us_number{
    margin-left: 35px;
    @media #{$large-mobile}{
        margin-left: 30px;
    }
    @media #{$small-mobile2}{
        margin-left: 18px;
    }
    & a{
        font-size: 30px;
        line-height: 30px;
        font-weight: 700;
        color: $secondary_color;
        font-family: $montserrat;
        @media #{$desktop-device}{
            font-size: 23px;
            line-height: 23px;
        }
        @media #{$tablet-device}{
            font-size: 22px;
            line-height: 25px;
        }
        @media #{$large-mobile}{
            font-size: 20px;
            line-height: 23px;
        }
        @media #{$small-mobile2}{
            font-size: 17px;
        }
    }
}

.counterup_sidebar {
    @media #{$large-mobile}{
        justify-content: center;
    }
    @media #{$small-mobile2}{
        flex-direction: column;
    }
}

.counterup_text{
    margin-right: 82px;
    @media #{$desktop-device}{
        margin-right: 40px;
    }
    @media #{$tablet-device}{
        margin-right: 50px;
        text-align: center;
    }
    @media #{$large-mobile}{
        margin-right: 35px;
        text-align: center;
    }
    @media #{$small-mobile2}{
        margin-right: 0;
        margin-bottom: 20px;
    }
    &:last-child{
        margin-right: 0;
    }
    & h3{
        font-size: 40px;
        line-height: 40px;
        font-weight: 700;
        color: $secondary_color;
        margin-bottom: 10px;
        @media #{$desktop-device}{
            font-size: 32px;
            line-height: 32px;
        }
        @media #{$tablet-device}{
            font-size: 30px;
            line-height: 36px;
        }
        @media #{$large-mobile}{
            font-size: 25px;
            line-height: 26px;
        }
    }
    & span{
        font-size: 16px;
        line-height: 22px;
        color: #666666;
        display: inline-block;
        @media #{$large-mobile}{
            font-size: 15px;
        }
    }
}

.business_section{
    position: relative;
    padding: 187px 0 155px;
    @media #{$tablet-device}{
        padding: 73px 0 79px;
    }
    @media #{$large-mobile}{
        padding: 55px 0 60px;
    }
    & .section_title {
        &.mb-35{
            @media #{$tablet-device}{
                margin-bottom: 22px;
            }
            @media #{$large-mobile}{
                margin-bottom: 20px;
            }
        }
    }
}
.business_content{
    @media #{$tablet-device}{
       text-align: center;
    }
    @media #{$large-mobile}{
        text-align: center;
    }
    & p{
        font-size: 18px;
        line-height: 34px;
        color: #666666;
        margin-bottom: 0;
        @media #{$desktop-device}{
            line-height: 30px;
        }
        @media #{$tablet-device}{
            font-size: 17px;
            line-height: 28px;
        }
        @media #{$large-mobile}{
            font-size: 16px;
            line-height: 27px;
        }
    }
    & a.btn.btn-link{
        margin-top: 60px;
        @media #{$desktop-device}{
            margin-top: 45px;
        }
        @media #{$tablet-device}{
            margin-top: 32px;
        }
        @media #{$large-mobile}{
            margin-top: 28px;
        }
    }
}

.business_position_img{
    position: absolute;
    left: 128px;
    bottom: -100px;
    @media #{$laptop-device}{
        left: 20px;
        bottom: -20px;
    }
    @media #{$desktop-device}{
        left: 20px;
        bottom: auto;
        top: 50%;
        transform: translatey(-50%);
    }
    @media #{$tablet-device}{
        position: inherit;
        left: 0;
        bottom: inherit;
        right: 0;
        text-align: center;
        padding: 72px 52px 0;
    }
    @media #{$large-mobile}{
        position: inherit;
        left: 0;
        bottom: inherit;
        right: 0;
        text-align: center;
        padding: 72px 30px 0;
    }
    & img{
        @media #{$laptop-device}{
            max-width: 560px;
        }
        @media #{$desktop-device}{
            max-width: 460px;
        }
    }
}

.solutions_section{
    background: #f0f3f9;
    padding: 216px 0 185px;
    @media #{$desktop-device}{
        padding: 142px 0 150px;
    }
    @media #{$tablet-device}{
        padding: 74px 0 80px;
    }
    @media #{$large-mobile}{
        padding: 55px 0 30px;
    }
    & .section_title {
        &.mb-100{
            @media #{$desktop-device}{
                margin-bottom: 60px;
            }
            @media #{$tablet-device}{
                margin-bottom: 45px;
            }
            @media #{$large-mobile}{
                margin-bottom: 35px;
            }
        }
    }
}

.solutions_inner {
    @media #{$large-mobile}{
       flex-direction: column;
    }
}

.solutions_list{
    width: 33.33%;
    background: #ffffff;
    border-right: 1px solid #e7e7e7;
    padding: 50px;
    position: relative;
    @media #{$desktop-device}{
        padding: 30px;
    }
    @media #{$tablet-device}{
        padding: 20px;
    }
    @media #{$large-mobile}{
        width: 100%;
        border: 0;
        padding: 30px;
        margin-bottom: 30px;
     }
    &:last-child{
        border-right: 0;
    }
    &::before{
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        background: $secondary_color;
        left: 50%;
        right: 50%;
        top: 0;
        transition: .3s;        
    }
    &:hover{
        &::before{
            width: 100%;
            left: 0;
            right: 0;
        }
    }
}

.solutions_icon{
    margin-bottom: 56px;
    @media #{$desktop-device}{
        margin-bottom: 40px;
    }
    @media #{$tablet-device}{
        margin-bottom: 30px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    & i{
        font-size: 60px;
        color: $secondary_color;
        width: 95px;
        height: 95px;
        line-height: 100px;
        text-align: center;
        display: inline-block;
        background: $secondary_color2;
        border-radius: 50%;
        &.icofont-pen-alt-3{
            font-size: 46px;
            @media #{$tablet-device}{
                font-size: 40px;
            }
            @media #{$large-mobile}{
                font-size: 40px;
            }
        }
        &.icofont-video{
            font-size: 46px;
            @media #{$tablet-device}{
                font-size: 40px;
            }
            @media #{$large-mobile}{
                font-size: 40px;
            }
        }
        @media #{$desktop-device}{
            width: 85px;
            height: 85px;
            line-height: 90px;
        }
        @media #{$tablet-device}{
            width: 75px;
            height: 75px;
            line-height: 79px;
            font-size: 48px;
        }
        @media #{$large-mobile}{
            font-size: 43px;
            width: 70px;
            height: 70px;
            line-height: 76px;
        }
    }
}
.solutions_text{
    & h3{
        font-size: 24px;
        line-height: 32px;
        color: $secondary_color;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 25px;
        @media #{$desktop-device}{
            font-size: 21px;
            line-height: 23px;
            margin-bottom: 20px;
        }
        @media #{$tablet-device}{
            font-size: 18px;
            line-height: 25px;
            margin-bottom: 15px;
        }
        @media #{$large-mobile}{
            font-size: 18px;
            line-height: 24px;
            margin-bottom: 14px;
        }
    }
    & p{
        font-size: 16px;
        line-height: 26px;
        color: #666666;
        @media #{$tablet-device}{
            font-size: 15px;
            line-height: 25px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 24px;
        }
    }
}

.learn_more{
    position: absolute;
    top: 48px;
    right: 48px;
    @media #{$tablet-device}{
        top: 30px;
        right: 25px;
    }
    & a{
        font-size: 13px;
        line-height: 15px;
        font-weight: 700;
        text-transform: uppercase;
        color: $secondary_color;
        border-bottom: 1px solid transparent;
        display: inline-block;
        &:hover{
            border-color: $secondary_color;
        }
    }
}

.business_position_img2{
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    right: 95px;
    @media #{$laptop-device}{
        right: 30px;
    }
    @media #{$desktop-device}{
        right: 20px;
    }
    @media #{$tablet-device}{
        position: inherit;
        left: 0;
        top: inherit;
        right: 0;
        transform: inherit;
        text-align: center;
        padding: 72px 52px 0;       
    }
    @media #{$large-mobile}{
        position: inherit;
        left: 0;
        top: inherit;
        right: 0;
        transform: inherit;
        text-align: center;
        padding: 72px 30px 0;       
    }
    & img{
        @media #{$laptop-device}{
           max-width: 580px;
        }
        @media #{$desktop-device}{
            max-width: 462px;
        }
    }
}
.business_shipping_list {
    margin-bottom: 51px;
    @media #{$desktop-device}{
        margin-bottom: 35px;
    }
    @media #{$tablet-device}{
        margin-bottom: 28px;
        flex-direction: column;
    }
    @media #{$large-mobile}{
        margin-bottom: 28px;
        flex-direction: column;
    }
    &:last-child{
        margin-bottom: 0;
    }
}
.business_shipping_icon{
    margin-right: 42px;
    @media #{$laptop-device}{
        margin-right: 30px;
     }
     @media #{$desktop-device}{
        margin-right: 25px;
    }
    @media #{$tablet-device}{
        margin-bottom: 18px;
        margin-right: 0;
    }
    @media #{$large-mobile}{
        margin-bottom: 20px;
        margin-right: 0;
    }
    & i{
        font-size: 60px;
        color: $secondary_color;
        @media #{$desktop-device}{
            font-size: 50px;
        }
        @media #{$tablet-device}{
            font-size: 50px;
        }
        @media #{$large-mobile}{
            font-size: 40px;
        }
    }
}
.business_shipping_text{
    & h3{
        font-size: 24px;
        line-height: 25px;
        font-weight: 700;
        text-transform: uppercase;
        color: $secondary_color;
        margin-bottom: 13px;
        @media #{$desktop-device}{
            font-size: 20px;
            line-height: 21px;
            margin-bottom: 11px;
        }
        @media #{$tablet-device}{
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 11px;
        }
        @media #{$large-mobile}{
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 11px;
        }
        @media #{$small-mobile2}{
            font-size: 16px;
            line-height: 22px;
        }
    }
    & p{
        font-size: 16px;
        line-height: 26px;
        color: #666666;
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 22px;
        }
    }
}

.business_chooseus{
    padding: 210px 0 246px;
    @media #{$desktop-device}{
        padding: 150px 0 150px;
    }
    @media #{$tablet-device}{
        padding: 76px 0 80px;
    }
    @media #{$large-mobile}{
        padding: 55px 0 60px;
    }
    & .section_title {
        &.mb-85{
            @media #{$desktop-device}{
                margin-bottom: 48px;
            }
            @media #{$tablet-device}{
                margin-bottom: 35px;
            }
            @media #{$large-mobile}{
                margin-bottom: 30px;
            }
        }
    }
}


.orgo_works_section{
    background: #f0f3f9;
    padding: 153px 0 147px;
    @media #{$tablet-device}{
        padding: 72px 0 73px;
    }
    @media #{$large-mobile}{
        padding: 50px 0 54px;
    }
}
.orgo_works_container{
    padding: 0 105px;
    @media #{$laptop-device}{
        padding: 0 30px;
    }
    @media #{$desktop-device}{
        padding: 0 15px;
    }
    @media #{$tablet-device}{
        padding: 0;
    }
    @media #{$large-mobile}{
        padding: 0;
    }
}

.single_works {
    background: #ffffff;
}
.orgo_works_header {
    margin-bottom: 67px;
    @media #{$desktop-device}{
        margin-bottom: 50px;
    }
    @media #{$tablet-device}{
        margin-bottom: 35px;
    }
    @media #{$large-mobile}{
        margin-bottom: 28px;
    }

}
.all_project{
    & a{
        font-size: 14px;
        text-transform: uppercase;
        color: #181b31;
        line-height: 16px;
        display: inline-block;
        border-bottom: 1px solid #767988;
        &:hover{
            color: $secondary_color2;
            border-color: $secondary_color2;
        }
    }
}
.works_content{
    padding: 42px 55px;
    @media #{$laptop-device}{
        padding: 42px 30px;
    }
    @media #{$desktop-device}{
        padding: 30px 20px;
    }
    @media #{$tablet-device}{
        padding: 15px 15px;
    }
    @media #{$large-mobile}{
        padding: 23px 15px;
        flex-direction: column;
    }
    & h3{
        font-size: 36px;
        line-height: 36px;
        font-weight: 700;
        font-family: $dmsans;
        margin-bottom: 0;
        & a{
            color: $secondary_color;
            &:hover{
                color: $secondary_color2;
            }
        }
        @media #{$laptop-device}{
            font-size: 28px;
            line-height: 30px;
        }
        @media #{$desktop-device}{
            font-size: 22px;
            line-height: 36px;
        }
        @media #{$tablet-device}{
            font-size: 18px;
            line-height: 36px;
        }
        @media #{$large-mobile}{
            font-size: 21px;
            line-height: 30px;
            margin-bottom: 5px;
        }
    }
    & span{
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        display: inline-block;
        @media #{$tablet-device}{
            font-size: 13px;
            line-height: 24px;
        }
        @media #{$large-mobile}{
            font-size: 15px;
        }
    }
}
.works_swiper {
    & .swiper-pagination{
        position: inherit;
        bottom: inherit;
        margin-top: 88px;
        z-index: 99;
        @media #{$desktop-device}{
            margin-top: 50px;
        }
        @media #{$tablet-device}{
            margin-top: 33px;
        }
        @media #{$large-mobile}{
            margin-top: 27px;
        }
        & span.swiper-pagination-bullet{
            width: 10px;
            height: 10px;
            background: #cccccc;
            opacity: 1;
            cursor: pointer;
            margin: 0 12px;
            &.swiper-pagination-bullet-active{
                background: #da4426;
            }
            @media #{$large-mobile}{
                margin: 0 6px;
            }
        }
    }
}


.testimonial_list {
    padding: 42px 50px 40px 44px;
    @media #{$desktop-device}{
        padding: 25px 30px;
    }
    @media #{$tablet-device}{
        padding: 30px;
    }
    @media #{$large-mobile}{
        padding: 30px;
    }
    position: relative;
    &:hover{
        &::before{
            left: 0;
            right: 0;
            width: 100%;
        }
    }
    &::before{
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        background: #304650;
        left: 50%;
        right: 50%;
        top: 0;
        transition: .3s;
    }
}
.testimonial_icon{
    text-align: right;
    margin-bottom: 10px;
    & i{
        font-size: 36px;
        color: $secondary_color;
    }
}

.testimonial_text{
    & h3{
        font-size: 18px;
        line-height: 23px;
        font-weight: 700;
        margin-bottom: 20px;
        & a{
            color: #000000;
            &:hover{
                color: $secondary_color2;
            }
        }
        & span{
            font-size: 14px;
            color: #999999;
            font-weight: 400;
        }
    }
    & p{
        font-size: 14px;
        line-height: 24px;
        color: #666666;
    }
}

.testimonial_inner{
    position: relative;
    padding: 165px 0;
    @media #{$desktop-device}{
        padding: 110px 0;
    }
    @media #{$tablet-device}{
        padding: 74px 0 0;
    }
    @media #{$large-mobile}{
        padding: 56px 0 0;
    }
}

.testimonial_position_img{
    position: absolute;
    bottom: 0;
    left: -120px;
    @media #{$laptop-device}{
        left: 0;
    }
    @media #{$desktop-device}{
        left: 0;
    }
    @media #{$tablet-device}{
        position: inherit;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        padding-top: 40px;
    }
    @media #{$large-mobile}{
        position: inherit;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        padding: 40px 10px 0;
    }
    & img{
        @media #{$laptop-device}{
           width: 520px;
        }
        @media #{$desktop-device}{
            width: 445px;
        }
    }
}
.testimonial_sidebar{
    padding-left: 62px;
    @media #{$tablet-device}{
        padding-left: 0;
    }
    @media #{$large-mobile}{
        padding-left: 0;
    }
    & .section_title {
        @media #{$tablet-device}{
            text-align: center;
        }
        @media #{$large-mobile}{
            text-align: center;
        }
        &.mb-63{
            @media #{$desktop-device}{
                margin-bottom: 40px;
            }
            @media #{$tablet-device}{
                margin-bottom: 35px;
            }
            @media #{$large-mobile}{
                margin-bottom: 35px;
            }
        }
    }
    
}

